<script>
import {defineComponent} from 'vue'
import UserAvatarName from "@/components/UserAvatarName.vue";
import ActStatus from "@/views/act/components/ActStatus.vue";

export default defineComponent({
  name: "ActInfoHead",
  components: {ActStatus, UserAvatarName},
  props: {
    user: Object,
    act: Object,
    apply: {
      type: Object,
      default: null
    }
  }
})
</script>

<template>
  <div class="act-info-head-div">
    <div class="act-info-head-left-div">
      <UserAvatarName
        :user="user"
        />
    </div>
    <div class="act-info-head-right-div">
      <ActStatus
        :act="act"
        :apply="apply"
        :user="user"
        />
    </div>
  </div>
</template>

<style scoped lang="less">
@import "@/assets/style/less/all.less";

.act-info-head-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  >.act-info-head-left-div{
    .flex-item-fit-width();
  }
  >.act-info-head-right-div{
    .flex-item-fix();
  }
}
</style>